<template>
	<div class="myself" @mouseenter="hover(sName, true)" @mouseleave="hover(sName, false)" @click="loginOut" title="点我退出登录" :ref="sName">
		<img class="user-img" src="//i0.hdslb.com/bfs/face/member/noface.jpg@87w_88h_1c_100q.webp" />
	</div>
</template>

<script>
export default{
	data(){
		return{
			sName: 'myself'
		}
	},
	methods:{
		// 移入显示浮窗移出隐藏
		hover(name, show){
			if(!name) return;
			this.$store.commit('pops/setPopsShow', {name, show})
		},
		// 根据元素设置起始位置，这里获取了所有有ref属性的元素
		getPosi(name){
			let target = this.$refs[name];
			this.$store.commit('pops/getComputedPosi', {name, target})
		},
		// 退出登录
		loginOut(){
			this.$store.dispatch('users/loginOut')
		},
	},
	mounted(){
		this.getPosi(this.sName);
	}
}
</script>

<style scoped lang="less">
.myself{
	position: relative;
	padding: 0 10px;
	height: 36px;
	.user-img{
		width: 36px;
		height: 36px;
		border-radius: 50%;
		transition: 0.2s;
		cursor: pointer;
	}
}
</style>
